import './index.scss'
import { Card, Form, Input, Button, ConfigProvider } from 'antd'
import logo from '@/assets/logo.png'
import { useDispatch } from 'react-redux'
import { fetchLogin } from '@/store/modules/user'
import { useNavigate } from 'react-router-dom'

const Login = () => {

    const dispatch = useDispatch()
    const navigate = useNavigate()   
    const onFinish = async (values) => {
        console.log(values)
        //触发异步action fetchLogin
        await dispatch(fetchLogin(values))
        //跳转至首页
        navigate('/')       
    }

    return (
        <ConfigProvider
            theme={{
                token: {
                    colorPrimary: '#00b96b',
                }
            }}
        >
            <div className="login">
                <Card className="login-container">
                    <img className="login-logo" src={logo} alt="" />
                    {/* 登录表单 */}
                    <Form onFinish={onFinish} validateTrigger="onBlur">
                        <Form.Item
                            name="username"
                            rules={[
                                { required: true, message: '用户名没有输入' },
                                { max: 9, message: '请输入9位拼接字符' }
                            ]}
                        >
                            <Input size="large" placeholder="请输入用户名" />
                        </Form.Item>
                        <Form.Item
                            name="password"
                            rules={[
                                { required: true, message: '密码没有输入' },
                                { pattern: /^\w{6,9}$/, message: '仅支持[字母、数字、下划线(_):6-9位的密码]再来' },
                                { pattern: /^(?!\d+$)(?![A-Za-z]+$)\w{6,9}$/, message: '不能全是字母或数字' },

                            ]}
                        >
                            <Input.Password size="large" placeholder="请输入密码" />
                        </Form.Item>
                        <Form.Item
                            style={{
                                marginBottom: 0,
                            }}
                        >
                            <Form.Item
                                name="takeNmu"
                                rules={[
                                    {
                                        required: true,
                                        message: '验证码没有输入',
                                    },
                                ]}
                                style={{
                                    display: 'inline-block',
                                    width: 'calc(50% - 8px)',

                                }}
                            >
                                <Input size="large" placeholder="请输入验证码" />
                            </Form.Item>
                            <Form.Item
                                style={{
                                    display: 'inline-block',
                                    width: 'calc(50% - 8px)',
                                    margin: '0 0 0 10px'

                                }}
                            >
                                <img
                                    style={{
                                        width: '100%',
                                        height: '40px'
                                    }}
                                    src=""
                                    alt="加载失败。。。"
                                />
                            </Form.Item>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" size="large" block>
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </Card>
            </div>
        </ConfigProvider>
    )
}

export default Login